<template>
    <div class="Teachcourse">
        <div class="Teachcourse-head">
            <label>
                <span>我的课程表</span>
            </label>
            <label class="create-myclass" @click="ToCreatecourse" v-if="isSijiaoCreat">
                <span>创建课程</span>
            </label>
        </div>
        <div class="Teachcourse-content">
            <div class="Teachcourse-content-nav">
                <ul>
                    <li v-for="(item,index) in TeachcourseNavList" :key="index" @click="Tabescelect(index)" :class="TeachcourseNavListIndex ==index?'navelecet':''">{{item}}</li>
                </ul>
            </div>
            <div class="Teachcourse-content-content" v-if="TeachcourseNavListIndex==0">
                <div class="Teachcourse-class-List">
                    <div v-if="TeachcourseInfoList.length ==0" class="Noclass">
                        <label>
                            <img src="/images/暂无课程安排.png" alt="">
                            <span>暂无课程安排</span>
                        </label>
                    </div>
                    <ul v-else>
                        <li v-for="(item,index) in TeachcourseInfoList" :key="index" @click="Todetials(item)">
                            <div class="Teachcourse-class-List-content">
                                <label>
                                    <img :src="item.cover" alt="">
                                </label>
                                <label class="Teachcourse-class-Info">
                                    <label class="Personalschedule-class-info-head">
                                        <span>{{item.title}}</span>
                                        <img src="/images/圆角矩形 37 拷贝 3@2x.png" @click.stop="Modifyprogram(item)"/>
                                    </label>
                                    <label class="Teachcourse-class-Infos">
                                        <img src="/images/视频直播icon@2x.png" v-if="item.classroom_type == 'online_video'"/>
                                        <img src="/images/语音直播@2x.png" v-else/>
                                        <span>{{item.map.groupinfo.group_name}}</span>
                                    </label>
                                    <label>
                                        <span>{{item.language_level}}</span>
                                        <span>{{item.language}}</span>
                                    </label>
                                    <label>
                                        <span>{{item.create_time}}</span>
                                        <span>{{item.start_time}}-{{item.end_time}}</span>
                                    </label>
                                    <label class="Isopenclasses">
                                        <span>{{item.timers}}</span>
                                        <span v-on:click.stop="GoInfo(item)">进入班级</span>
                                    </label>
                                </label>
                            </div>
                        </li>
                    </ul>
                </div>
            </div>
            <div class="Teachcourse-content-content" v-else-if="TeachcourseNavListIndex==1">
                <div class="Whetherappointment">
                    <ul>
                        <li v-for="(item,index) in WhetherappointmentList" :key="index" @click="Whether(index)" :class="WhetherappointmentListindex == index?'Whethercalss':''">
                            {{item}}
                        </li>
                    </ul>
                </div>
                <div class="Teachcourse-class-List" v-if="WhetherappointmentListindex==0">
                    <ul>
                        <li v-for="(item,index) in Alreadybooked" :key="index">
                            <div class="Teachcourse-class-List-content">
                                <label>
                                    <img :src="item.map.appointmentuserinfo.avatar" alt="">
                                </label>
                                <label class="Teachcourse-class-Info">
                                    <label class="Personalschedule-class-info-head">
                                        <span>{{item.map.appointmentinfo[0].title}}</span>
                                        <img src="/images/圆角矩形 37 拷贝 3@2x.png" @click="ToModify(item.map.appointmentinfo[0].id,item.master_id,item.create_time)"/>
                                    </label>
                                    <label class="Personalschedule-class-Infos">
                                        <img src="/images/椭圆 30 拷贝@2x.png"/>
                                        <span>{{item.map.appointmentuserinfo.nick_name}}</span>
                                    </label>
                                    <label>
                                        <span>{{item.create_time}}</span>
                                        <span>{{item.start_time}}-{{item.end_time}}</span>
                                    </label>
                                    <label class="Personaltraining-Isopenclasses">
                                        <span @click="tocancellation(item.map.appointmentuserinfo.user_id,item.map.appointmentinfo[0].id,item.map.userinfo.user_id,)">取消预约</span>
                                    </label>
                                </label>
                            </div>
                        </li>
                    </ul>
                    <div v-if="Alreadybooked.length == 0" class="Noclass">
                        <label>
                            <img src="/images/暂无课程安排.png" alt="">
                            <span>暂无预约</span>
                        </label>
                    </div>
                </div>
                <div class="Notbooked" v-else>
                    <ul>
                        <li v-for="(item,index) in WhetherappointPersonaltraining" :key="index">
                            <div class="Notbooked">
                                <label>
                                     <img src="/images/默认头像 拷贝 2@2x.png"/>
                                </label>
                                <label>
                                    <span>{{item.create_time}}  {{item.start_time}}-{{item.end_time}}</span>
                                    <span>暂无预约</span>
                                </label>
                            </div>
                        </li>
                    </ul>
                    <div v-if="WhetherappointPersonaltraining.length == 0" class="Noclass" style="margin-left:-950px;">
                        <label>
                            <img src="/images/暂无课程安排.png" alt="">
                            <span>暂无预约</span>
                        </label>
                    </div>
                </div>
            </div>
            <div class="Teachcourse-content-content" v-else-if="TeachcourseNavListIndex==2">
                <div class="Whetherappointment">
                    <ul>
                        <li v-for="(item,index) in WhetherappointmentList" :key="index" @click="Whether(index)" :class="WhetherappointmentListindex == index?'Whethercalss':''">
                            {{item}}
                        </li>
                    </ul>
                </div>
                <div class="Teachcourse-class-List" v-if="WhetherappointmentListindex==0">
                    <ul>
                        <li v-for="(item,index) in Alreadybooked" :key="index">
                            <div class="Teachcourse-class-List-content">
                                <label>
                                    <img :src="item.map.appointmentuserinfo.avatar" alt="">
                                </label>
                                <label class="Teachcourse-class-Info">
                                    <label class="Personalschedule-class-info-head">
                                        <span>{{item.map.appointmentinfo[0].title}}</span>
                                        <img src="/images/圆角矩形 37 拷贝 3@2x.png" @click="ToModify(item.map.appointmentinfo[0].id,item.master_id,item.create_time)"/>
                                    </label>
                                    <label class="Personalschedule-class-Infos">
                                        <img src="/images/椭圆 30 拷贝@2x.png"/>
                                        <span>{{item.map.appointmentuserinfo.nick_name}}</span>
                                    </label>
                                    <label>
                                        <span>{{item.create_time}}</span>
                                        <span>{{item.start_time}}-{{item.end_time}}</span>
                                    </label>
                                    <label class="Personaltraining-Isopenclasses">
                                        <span v-if="item.map.appointmentinfo[0].status == 4">取消预约中</span>
                                        <span v-else-if="item.map.appointmentinfo[0].status == 5">修改预约中</span>
                                        <span v-else @click="tocancellation(item.map.appointmentuserinfo.user_id,item.map.appointmentinfo[0].id,item.map.userinfo.user_id)">取消预约</span>
                                    </label>
                                </label>
                            </div>
                        </li>
                    </ul>
                    <div v-if="Alreadybooked.length == 0" class="Noclass">
                        <label>
                            <img src="/images/暂无课程安排.png" alt="">
                            <span>暂无预约</span>
                        </label>
                    </div>
                </div>
                <div class="Notbooked" v-else>
                    <ul>
                        <li v-for="(item,index) in WhetherappointPersonaltraining" :key="index">
                            <div class="Notbooked">
                                <label>
                                     <img src="/images/默认头像 拷贝 2@2x.png"/>
                                </label>
                                <label>
                                    <span>{{item.create_time}}  {{item.start_time}}-{{item.end_time}}</span>
                                    <span @click="cancleYuyue(item)" style="cursor: pointer;">取消预约</span>
                                </label>
                            </div>
                        </li>
                    </ul>
                    <div v-if="WhetherappointPersonaltraining.length == 0" class="Noclass" style="margin-left:-950px;">
                        <label>
                            <img src="/images/暂无课程安排.png" alt="">
                            <span>暂无预约</span>
                        </label>
                    </div>
                </div>
            </div>
            <div class="Teachcourse-content-content" v-else-if="TeachcourseNavListIndex==3">
                <div class="Whetherappointment">
                    <ul>
                        <li v-for="(item,index) in WhetherappointmentList" :key="index" @click="Whether(index)" :class="WhetherappointmentListindex == index?'Whethercalss':''">
                            {{item}}
                        </li>
                    </ul>
                </div>
                <div class="Teachcourse-class-List" v-if="WhetherappointmentListindex==0">
                    <ul>
                        <li v-for="(item,index) in Alreadybooked" :key="index">
                            <div class="Teachcourse-class-List-content">
                                <label>
                                    <img :src="item.map.appointmentuserinfo.avatar" alt="">
                                </label>
                                <label class="Teachcourse-class-Info">
                                    <label class="Personalschedule-class-info-head">
                                        <span>{{item.map.appointmentinfo[0].title}}</span>
                                        <img src="/images/圆角矩形 37 拷贝 3@2x.png" @click="ToModify(item.map.appointmentinfo[0].id,item.master_id,item.create_time)"/>
                                    </label>
                                    <label class="Personalschedule-class-Infos">
                                        <img src="/images/椭圆 30 拷贝@2x.png"/>
                                        <span>{{item.map.appointmentuserinfo.nick_name}}</span>
                                    </label>
                                    <label>
                                        <span>{{item.create_time}}</span>
                                        <span>{{item.start_time}}-{{item.end_time}}</span>
                                    </label>
                                    <label class="Personaltraining-Isopenclasses">
                                        <span v-if="item.map.appointmentinfo[0].status == 4">取消预约中</span>
                                        <span v-else-if="item.map.appointmentinfo[0].status == 5">修改预约中</span>
                                        <span v-else @click="tocancellation(item.map.appointmentuserinfo.user_id,item.map.appointmentinfo[0].id,item.map.userinfo.user_id)">取消预约</span>
                                        
                                    </label>
                                </label>
                            </div>
                        </li>
                    </ul>
                    <div v-if="Alreadybooked.length == 0" class="Noclass">
                        <label>
                            <img src="/images/暂无课程安排.png" alt="">
                            <span>暂无预约</span>
                        </label>
                    </div>
                </div>
                <div class="Notbooked" v-else>
                    <ul>
                        <li v-for="(item,index) in WhetherappointPersonaltraining" :key="index">
                            <div class="Notbooked">
                                <label>
                                     <img src="/images/默认头像 拷贝 2@2x.png"/>
                                </label>
                                <label>
                                    <span>{{item.create_time}}  {{item.start_time}}-{{item.end_time}}</span>
                                    <span @click="cancleYuyue(item)" style="cursor: pointer;">取消预约</span>
                                </label>
                            </div>
                        </li>
                    </ul>
                    <div v-if="WhetherappointPersonaltraining.length == 0" class="Noclass" style="margin-left:-950px;">
                        <label>
                            <img src="/images/暂无课程安排.png" alt="">
                            <span>暂无预约</span>
                        </label>
                    </div>
                </div>
            </div>
            <div class="Teachcourse-content-content" v-else-if="TeachcourseNavListIndex==4">
                <div class="Whetherappointment">
                    <ul>
                        <li v-for="(item,index) in WhetherappointmentList" :key="index" @click="Whether(index)" :class="WhetherappointmentListindex == index?'Whethercalss':''">
                            {{item}}
                        </li>
                    </ul>
                </div>
                <div class="Teachcourse-class-List" v-if="WhetherappointmentListindex==0">
                    <ul>
                        <li v-for="(item,index) in Alreadybooked" :key="index">
                            <div class="Teachcourse-class-List-content">
                                <label>
                                    <img :src="item.map.appointmentuserinfo.avatar" alt="">
                                </label>
                                <label class="Teachcourse-class-Info">
                                    <label class="Personalschedule-class-info-head">
                                        <span>{{item.map.appointmentinfo[0].title}}</span>
                                        <img src="/images/圆角矩形 37 拷贝 3@2x.png" @click="ToModify(item.map.appointmentinfo[0].id,item.master_id,item.create_time)"/>
                                    </label>
                                    <label class="Personalschedule-class-Infos">
                                        <img src="/images/椭圆 30 拷贝@2x.png"/>
                                        <span>{{item.map.appointmentuserinfo.nick_name}}</span>
                                    </label>
                                    <label>
                                        <span>{{item.create_time}}</span>
                                        <span>{{item.start_time}}-{{item.end_time}}</span>
                                    </label>
                                    <label class="Personaltraining-Isopenclasses">
                                        <span v-if="item.map.appointmentinfo[0].status == 4">取消预约中</span>
                                        <span v-else-if="item.map.appointmentinfo[0].status == 5">修改预约中</span>
                                        <span v-else @click="tocancellation(item.map.appointmentuserinfo.user_id,item.map.appointmentinfo[0].id,item.map.userinfo.user_id)">取消预约</span>
                                    </label>
                                </label>
                            </div>
                        </li>
                    </ul>
                    <div v-if="Alreadybooked.length == 0" class="Noclass">
                        <label>
                            <img src="/images/暂无课程安排.png" alt="">
                            <span>暂无预约</span>
                        </label>
                    </div>
                </div>
                <div class="Notbooked" v-else>
                    <ul>
                        <li v-for="(item,index) in WhetherappointPersonaltraining" :key="index">
                            <div class="Notbooked">
                                <label>
                                     <img src="/images/默认头像 拷贝 2@2x.png"/>
                                </label>
                                <label>
                                    <span>{{item.create_time}}  {{item.start_time}}-{{item.end_time}}</span>
                                    <span @click="cancleYuyue(item)" style="cursor: pointer;">取消预约</span>
                                </label>
                            </div>
                        </li>
                    </ul>
                    <div v-if="WhetherappointPersonaltraining.length == 0" class="Noclass" style="margin-left:-950px;">
                        <label>
                            <img src="/images/暂无课程安排.png" alt="">
                            <span>暂无预约</span>
                        </label>
                    </div>
                </div>
            </div>
        </div>
        <div class="Lvie-cl-de-con-pagination">
                <el-pagination background layout="prev, pager, next" :page-size="8" :total="total"></el-pagination>
        </div>
    </div>
</template>
<script>
export default {
    name:'Teachcourse',
    inject: ['reload'],
    data(){
        return{
            Timersvalue:new Date,
            TeachcourseNavList:['直播课堂讲师','私教','跨境助学师','母语助学师','专业助学师'],
            TeachcourseNavListIndex:0,
            TeachcourseInfoList:[
                {
                    cover:'/images/图层 8@2x.png',
                    classname:'话题/学习教育',
                    type:'视频直播',
                    classid:'007班',
                    classleve:'初级',
                    teachlanguage:'阿拉伯语',
                    data:'2020-05-15',
                    timers:'14:00-14:30',
                    week:'星期五',
                    Isclassopen:true
                },
                {
                    cover:'/images/图层 8@2x.png',
                    classname:'话题/聊聊近期计划',
                    type:'视频直播',
                    classid:'007班',
                    classleve:'初级',
                    teachlanguage:'阿拉伯语',
                    data:'2020-05-15',
                    timers:'14:00-14:30',
                    week:'星期五',
                    Isclassopen:true
                },
                {
                    cover:'/images/图层 8@2x.png',
                    classname:'话题/聊一些趣事',
                    type:'视频直播',
                    classid:'007班',
                    classleve:'初级',
                    teachlanguage:'阿拉伯语',
                    data:'2020-05-15',
                    timers:'14:00-14:30',
                    week:'星期五',
                    Isclassopen:true
                },
                {
                    cover:'/images/图层 8@2x.png',
                    classname:'话题/学习教育',
                    type:'视频直播',
                    classid:'007班',
                    classleve:'初级',
                    teachlanguage:'阿拉伯语',
                    data:'2020-05-15',
                    timers:'14:00-14:30',
                    week:'星期五',
                    Isclassopen:true
                }
            ],
            languageEn:[
                {"Estonian":"爱沙尼亚语"},
				{"Arabic":"阿拉伯语"},
				{"Bulgarian":"保加利亚语"},
				{"polish":"波兰语"},
				{"Danish":"丹麦语"},
				{"German":"德语"},
				{"Russian":"俄语"},
				{"Traditional Chinese":"繁体中文"},
				{"French":"法语"},
				{"Finnish":"芬兰语"},
				{"Korean":"韩语"},
				{"Dutch":"荷兰语"},
				{"Czech":"捷克语"},
				{"romanian":"罗马尼亚语"},
				{"Portuguese":"葡萄牙语"},
				{"Japanese":"日语"},
				{"Swedish":"瑞典语"},
				{"slovenian":"斯洛文尼亚语"},
				{"Thai":"泰语"},
				{"Spanish":"西班牙语"},
				{"Greek":"希腊语"},
				{"hun":"匈牙利语"},
				{"Italian":"意大利语"},
				{"English":"英语"},
				{"Vietnamese":"越南语"},
				{"cantonese":"粤语"},
				{"Chinese":"中文"}
            ],
            WhetherappointmentList:['已被预约','未被预约'],
            WhetherappointmentListindex:'',
            Personaltraining:[
               {
                    cover:'/images/图层 8@2x.png',
                    classname:'话题/学习教育',
                    type:'视频直播',
                    nick_name:'可口可乐',
                    data:'2020-05-15',
                    timers:'14:00-14:30',
                    Isclassopen:true
                },
            ],
            Alreadybooked:[],//已被预约
            WhetherappointPersonaltraining:[],//未被预约
            total:100,
            unserinfo:JSON.parse(localStorage.getItem('userinfo')),
            isSijiaoCreat:true,
        }
    },
    mounted(){
        this.thecreated()
    },
    methods: {
        Torefresh(){//刷新
            this.reload()
        },
        cancleYuyue(item){
            console.log(item,'预约课程信息')
            let data = {
                id : item.id, 
            }
            this.$axios({
                method:'get',
                url:'http://101.37.66.151:8768/eg-api/user/masterAppointment/delete',
                params:data,
                }).then((res) =>{
                    // console.log(res.data.data,'取消预约')
                    alert(res.data.message)
                    if(res.data.code == 0){
                        this.Torefresh()
                    }
                }).catch((error) =>{
                    console.log(error)
            })
        },
        Tabescelect(e){//选项卡切换
            this.TeachcourseNavListIndex = e
            this.Alreadybooked = []
            this.WhetherappointPersonaltraining = []
            if(this.TeachcourseNavListIndex == 0){
                this.isSijiaoCreat = true
            }else if (this.TeachcourseNavListIndex == 1){
                this.isSijiaoCreat = false
            }else{
                this.isSijiaoCreat = true
                this.getlivelecturerList()
            }
        },
        Todetials(item){//进入课堂详情
            this.$router.push({path:'/views/Teachingcenters/Teachingcentercoursedetails',query: {id: item.id}})
        },
        Whether(e){
            this.WhetherappointmentListindex = e
        },
        ToCreatecourse(){//直播课堂创建课程
            if(this.TeachcourseNavListIndex == 0){
                this.$router.push({path:'/views/Teachingcenters/Createcourse'})
            }else if(this.TeachcourseNavListIndex == 1){
                this.isSijiaoCreat = false
            }else{
                this.$router.push({path:'/views/Teachingcenters/Createprivateinstructor'})
            }
            console.log(this.TeachcourseNavListIndex)
        },
        thecreated(){
            var data ={
                currentPage:1,
                pageSize:8,
                type:"open_class",
                master_id:this.unserinfo.user_id
            }
            this.$axios({
                method:'get',
                url:'http://101.37.66.151:8768/eg-api/user/masterAppointment/queryBeginListPage',
                params:data,
                }).then((res) =>{
                    this.TeachcourseInfoList = res.data.data
                    this.TeachcourseInfoList.forEach(e=>{
                        var stars = e.start_time
                        var entimes = e.end_time
                        var times = stars.substring(0, stars.indexOf(' '))//截取当前日期
                        var starttime =  stars.substring(11, 16)//截取开始时间
                        var endtime =  entimes.substring(11, 16)//截取结束时间
                        var myDate = new Date(Date.parse(times));  
                        e['create_time'] = times
                        e['start_time'] = starttime
                        e['end_time'] = endtime
                        if(e.language_level == 'Zero basis'){
                            e['language_level'] = '零基础'
                        }else if(e.language_level == 'Intermediate'){
                            e['language_level'] = '中级'
                        }else if(e.language_level == 'Primary'){
                            e['language_level'] = '初级'
                        }else if(e.language_level == 'Senior'){
                            e['language_level'] = '高级'
                        }
                        this.languageEn.forEach(function(j){
                            if(j[e['language']]){
                                e['language']=j[e['language']]
                            }
                            
                        })
                    })
                    console.log( this.TeachcourseInfoList,'wiw')
                }).catch((error) =>{
                    console.log(error)
            })
        },
        Modifyprogram(item){//修改课程
            this.$router.push({path:'/views/Teachingcenters/Modifyprogram',query: {item: item}})
        },
        GoInfo(item){//直播讲师进入班级
            console.log(item)
            this.$router.push({path:'/views/Teachingcenters/Classdetails',query: {id: item.map.groupinfo.id}})
        },
        Tocreatedclass(){//私教创建课程
            this.$router.push({path:'/views/Teachingcenters/Personaltrainingtocreate',query: {id: id}})
        },
        ToModify(id,masterid,timers){//私教修改课程
            this.$router.push({path:'/views/Teachingcenters/Reviseprivateteachingcurriculum',query: {id: id,masterid:masterid,timers:timers}})
        },
        getlivelecturerList(){//专业助学师
            var data ={
                currentPage:1,
                pageSize:8,
                type:"single_class",
                master_id:this.unserinfo.user_id
            }
            this.$axios({
                method:'get',
                url:'http://101.37.66.151:8768/eg-api/user/masterAppointment/queryBeginListPage',
                params:data,
                }).then((res) =>{
                    console.log(res.data.data,'专业助学师')
                    res.data.data.forEach(e=>{
                            var stars = e.start_time
                            var entimes = e.end_time
                            var times = stars.substring(0, stars.indexOf(' '))//截取当前日期
                            var starttime =  stars.substring(11, 16)//截取开始时间
                            var endtime =  entimes.substring(11, 16)//截取结束时间
                            var myDate = new Date(Date.parse(times));  
                            e['create_time'] = times
                            e['start_time'] = starttime
                            e['end_time'] = endtime
                        if(e.map.appointmentinfo == undefined){
                            this.WhetherappointPersonaltraining.push(e)
                        }else{
                            this.Alreadybooked.push(e)
                        }
                    })
                }).catch((error) =>{
                    console.log(error)
            })
        },
        tocancellation(masterid,id,userid){//取消预约
            console.log(masterid,id,userid,'999')
            var data ={
                master_id:masterid,
                id:id,
                user_id:userid,
                update_identity:'master',
                update_type:'cancel',
                status :5,
            }
            this.$axios({
                method:'POST',
                url:'http://101.37.66.151:8768/eg-api/user/userAppointment/update',
                data:data,
                }).then((res) =>{
                    console.log(res.data.data,'取消预约')
                    alert(res.data.message)
                }).catch((error) =>{
                    console.log(error)
            })
        }
    }
}
</script>
<style lang="less" scoped>
    .Teachcourse{
        position: relative;
        width: 100%;
        min-height: 1041px;
        border-radius: 20px;
        background: #ffffff;
    }
    /*头部样式*/
    .Teachcourse-head{
        position: relative;
        width: 90%;
        height: 80px;
        margin: 0 auto;
        display: flex;
        align-items: center;
        justify-content: space-between;
        border-bottom: 1px solid #2DC7C8;
        label{
            height: 30px;
            width: 123px;
            &:first-child{
                width: 12%;
                height: 20px;
                color: #2DC7C8;
                font-weight: bold;
                border-left: 8px solid #2DC7C8;
                padding-left: 1%;
            }
        }
    }
    .create-myclass{
        width: 16%;
        text-align: center;
        line-height: 30px;
        color: #ffffff;
        background:rgba(45,199,200,1);
        border-radius:15px;
        margin-left: 10%;
        span{
            display: inline-block;
            background-image: url('/images/icon 拷贝@2x.png');
            background-repeat: no-repeat;
            background-position-y: 50%;
            padding-left: 14%;
            cursor: pointer;
        }
    }
    .Timersvalues{
        width: 44%;
        margin-left: 4%;
        /deep/.el-range-editor{
            width: 100%;
            height: 30px;
            border-radius: 15px;
            border: 1px solid #47CECF;
            /deep/.el-range-separator{
                line-height: 22px;
            }
            /deep/.el-range__icon{
                line-height: 22px;
            }
            /deep/.el-range__close-icon{
                display: none;
            }
        }
    }
    .screenings{
        width: 10%;
        padding-left: 2%;
        span{
            display: inline-block;
            width: 100%;
            height: 30px;
            background:rgba(71,206,207,1);
            border-radius:15px;
            line-height: 30px;
            color: #ffffff;
            text-align: center;
            cursor: pointer;
        }
    }
    /*内容样式*/
    .Teachcourse-content{
        position: relative;
        width: 90%;
        margin: 0 auto;
    }
    /*tabs选项卡切换*/
    .Teachcourse-content-nav{
        position: relative;
        width: 100%;
        height: 50px;
        ul{
            display: flex;
            list-style: none;
            height: 50px;
            align-items: center;
            justify-content: flex-end;
            padding: 0;
            li{
                height: 50px;
                line-height: 50px;
                border:1px solid transparent;//解决点击选中后变形问题
                text-align: center;
                cursor: pointer;
                margin-left: 40px;
            }
        }
    }
    .navelecet{
        color: #2DC7C8;
        border-bottom: 2px solid #2DC7C8!important;
    }
    /*列表样式*/
    .Teachcourse-class-List{
        position: relative;
        width: 100%;
        padding-bottom: 40px;
        ul{
            display: flex;
            width: 100%;
            list-style: none;
            padding: 0;
            flex-wrap: wrap;
            justify-content: space-between;
            li{
                width: 48%;
                height: 200px;
                border:1px solid rgba(54,205,206,1);
                border-radius:5px;
                margin-top: 20px;
                cursor: pointer;
            }
        }
    }
    .Teachcourse-class-List-content{
        position: relative;
        width: 90%;
        margin: 0 auto;
        display: flex;
        height: 100%;
        align-items: center;
        cursor: pointer;
    }
    .Teachcourse-class-List-content>label:first-child{
        width: 34%;
        border-radius: 15px;
        overflow: hidden;
        img{
            width: 100%;
        }
    }
    .Teachcourse-class-Info{
        width: 50%;
        height: 90%; 
        padding-left: 6%;
        h2{
            color: #555555;
            font-weight: bold;
            font-size: 16px;
            margin-bottom: 0;
        }
        label{
            display: flex;
            // justify-content: space-between;
            font-size: 14px;
            height: 24px;
            line-height: 24px;
            margin-top: 8px;
            span{
                display: inline-block;
                width: auto;
                &:first-child{
                    width: auto;
                }
                &:last-child{
                    margin-left: 10%;
                    text-align: left;

                }
            }
        }
    }
    .Teachcourse-class-Info>.Teachcourse-class-Infos{
        margin-top: 10px;
        img{
            width: 40%;
        }
        span{
            &:first-child{
                display: inline-block;
                width: 44%;
                height: 26px;
                color: #FF5757;
                text-align: center;
                border-radius: 15px;
                border: 1px solid #FF5757;
            }
        }
    }
    .Isopenclasses{
        span{
            display: flex;
            &:first-child{
                width: 50%!important;
            }
            &:last-child{
                color: #FF4E00;
                cursor: pointer;
            }
        }
    }
    .Lvie-cl-de-con-pagination{
        position: relative;
        width: 100%;
        height: 100px;
        margin-bottom: 40px;
        display: flex;
        justify-content: flex-end;
        margin-right: 100px;
    }
    .Personalschedule-class-info-head{
        span{
            width: 100%!important;
            overflow: hidden;
            color: #555555;
            font-size: 18px;
            font-weight: bold;
        }
        img{
            cursor: pointer;
        }
    }
    /*私教*/
    .Whetherappointment{
        display: flex;
        width: 100%;
        ul{
            position: relative;
            width: 30%;
            margin: 0 auto;
            display: flex;
            margin-top: 40px;
            height: 40px;
            align-items: center;
            justify-content: center;
            padding: 0;
            list-style: none;
            border:1px solid rgba(71,206,207,1);
            border-radius:22px;
            li{
                width: 50%;
                height: 40px;
                line-height: 40px;
                text-align: center;
                color: #47CECF;
                font-size: 16px;
                cursor: pointer; 
            }
        }
    }
    .Whethercalss{
        border:1px solid rgba(71,206,207,1);
        border-radius:22px;
        color: #ffffff!important;
        background: #47CECF;
    }
    .Personaltraining-Isopenclasses{
        text-align: right;
        color: #2DC7C8;
        display: flex;
        span{
            margin-left: auto!important;
            cursor: pointer;
        }
        
    }
    .Notbooked{
        position: relative;
        width: 100%;
        padding-bottom: 40px;
        ul{
            display: flex;
            list-style: none;
            padding: 0;
            width: 100%;
            justify-content: space-between;
            flex-wrap: wrap;
            li{
                width: 48%;
                height:180px;
                border:2px solid rgba(54,205,206,1);
                border-radius:10px;
                margin-top: 30px;
            }
        }
    }
    .Notbooked{
        position: relative;
        width: 100%;
        margin: 0 auto;
        display: flex;
        height: 100%;
        align-items: center;
        justify-content: space-between;
    }
    .Notbooked>label{
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        justify-content: center;
        font-size: 16px;
        width: 40%;
        height: 100%;
        img{
            width: 120px;
        }
    }
    .Notbooked>label:last-child{
        width: 60%;
        span{
            display: block;
            width: 100%;
            &:first-child{
                margin-top: 20%;
            }
            &:last-child{
                margin-left: auto;
                text-align: right;
                color: #C0C0C0;
                margin-right: 14%;
            }
        }
    }
    .Personalschedule-class-Infos{
        display: flex;
        align-items: center;
        img{
            height: 12px;
        }
    }
    .Noclass{
        position: relative;
        width: 90%;
        margin: 0 auto;
        height: 600px;
        display: flex;
        align-items: center;
        justify-content: center;
        flex-wrap: wrap;
        img{
            width: 63px;
            height: 51px;
        }
    }
    .Noclass>label{
        width: 100%;
        display: flex;
        justify-content: center;
        flex-wrap: wrap;
    }
    .Noclass>label>span{
        display: block;
        width: 100%;
        text-align: center;
        font-size: 18px;
        color: #d8d8d8;
        margin-top: 10px;
    }
</style>